<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <button id="replay">播放录像</button>
  <script>
    var Ryu = {
      attack: function () {
        console.log('攻击')
      },
      defense: function () {
        console.log('防御')
      },
      jump: function () {
        console.log('跳')
      },
      crouch: function () {
        console.log('蹲下')
      }
    }
    let makeCommand = function (receiver, state) {
      return function () {
        receiver[state]()
      }
    }
    let commandStack = [];
    let commands = {
      '87': 'jump',
      '83': 'crouch',
      '65': 'defense',
      '68': 'attack'
    }

    document.onkeydown = function (ev) {
      var keyCode = ev.keyCode;
      if (!commands[keyCode]) return;
      let command = makeCommand(Ryu, commands[keyCode]);
      commandStack.push(command);
    }
    document.getElementById('replay').onclick = function () {
      let command;
      while (command = commandStack.shift()) {
        command()
      }
    }
  </script>
</body>

</html>